<template>
  <div class="imageLoader-container">
      <img v-if="!everythingDone" class="placeholder" :src="placeholder" alt="" />
      <img 
        :src="src" 
        @load="handleLoad"
        :style="{opacity:originOpacity,transition:`${duration}ms`}"
        alt=""
      />
      <img v-if="!everythingDone" class="placeholder" :src="placeholder" alt="" />

  </div>
</template>

<script>
export default {
    props:{
        src:{//原图
            type:String,
            required:true,
        },
        placeholder:{//占位图
            type:String,
            required:true,
        },
        duration:{//延迟时间
            type:Number,
            default:500,
        },
    },
    data(){
        return{
            originLoaded:0,//原图是否加载完成
            everythingDone:false,//是否一切准备好
        }
    },
    computed:{
        originOpacity(){
            this.originLoaded?1:0;
        },
    },
    methods:{
        handleLoad(){
            this.originLoaded=1;//加载完成
            setTimeout(()=>{
                this.everythingDone=true;
                this.$emit("load");
            },this.duration);
        },
    },
};
</script>

<style scoped lang="less">
@import "~@/styles/mixin.less";
.imageLoader-container{
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    img{
        .self-fill();
        object-fit: cover;
    }
    .placeholder{
        filter: blur(2vw);
    }
}

</style>